<!-- 待审核列表页 -->
<template>
  <view class="container_send">
    <view class="center">
      <!-- 收发货人信息 -->
      <view class="conCard">
        <div class="flex">
          <image src="../../assets/images/index/我要发货/shouye_icon_fahuo.png" style="width: 42px; height: 42px" />
          <view class="box">
            <view class="title">{{ orderList.shipper || '暂无数据' }}{{ orderList.shipperMobile || '暂无数据' }}</view>
            <view>{{ orderList.shipperAdd || '暂无数据' }}</view>
          </view>
        </div>
        <div class="flex">
          <image src="../../assets/images/index/我要发货/shouye_icon_shouhuo.png" style="width: 42px; height: 42px" />
          <view class="box">
            <view class="title">{{ orderList.receiver || '暂无数据' }}{{ orderList.receiverMobile || '暂无数据' }}</view>
            <view>{{ orderList.receiverAdd || '暂无数据' }}</view>
          </view>
        </div>
      </view>
    </view>
    <!-- 基本信息 -->
    <view class="card">
      <view class="box">
        <view class="title">基本信息</view>
        <view class="flex">
          <view class="content">
            <view class="tit">承运单号</view>
            <view class="text">{{ orderList.billNo || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex">
          <view class="content">
            <view class="tit">下单时间</view>
            <view class="text">{{ orderList.billingTime || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex">
          <view class="content">
            <view class="tit">起运地</view>
            <view class="text">{{ orderList.startBranchName || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex">
          <view class="content">
            <view class="tit">目的地</view>
            <view class="text">{{ orderList.destinationBranchName || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex">
          <view class="content">
            <view class="tit">外转目的地</view>
            <view class="text">{{ orderList.outSourcingDestination || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex">
          <view class="content">
            <view class="tit">承运类型</view>
            <view class="text">{{ pickSendType(orderList.sendType) || '暂无数据' }}</view>
          </view>
          <view class="content">
            <view class="tit">付款方式</view>
            <view class="text">{{ pickClearingForm(orderList.clearingForm) || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex">
          <view class="content">
            <view class="tit">接货方式</view>
            <view class="text">{{ pickUpType(orderList.pickUpMode) || '暂无数据' }}</view>
          </view>
          <view class="content">
            <view class="tit">保价声明</view>
            <view class="text">￥{{ orderList.insuredMoney || '暂无数据' }}</view>
          </view>
        </view>
        <view class="gray_box gray_bg" v-if="orderList.isReceiving == '1'">
          <image class="headPortrait" src="@/assets/images/32pt@3x.png" />
          <view>
            <view class="tit">上门接货时间</view>
            <view class="text">{{ orderList.receivingTime || '暂无数据' }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 货物信息  -->
    <view class="card" v-if="orderList.goodsInfo.length !== 0">
      <view class="box">
        <view class="title">货物信息</view>
        <view class="gray_bg">
          <view class="gray_flex" v-for="(item, index) in orderList.goodsInfo" :key="index">
            <view class="tit">{{ filterGoodsName(item) || '暂无数据' }}</view>
            <view class="text">{{ filterGoodsInfo(item) || '暂无数据' }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 提货信息 -->
    <view class="card">
      <view class="box">
        <view class="title">提货信息</view>
        <view class="flex">
          <view class="content">
            <view class="tit">提货方式</view>
            <view class="text">{{ pickUpType(orderList.pickUpMode) || '暂无数据' }}</view>
          </view>
          <view class="content">
            <view class="tit">直送服务</view>
            <view class="text">{{ pickDeliveryType(orderList.deliveryType) || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex">
          <view class="content">
            <view class="tit">卸货类型</view>
            <view class="text">{{ pickDischargeServer(orderList.dischargeServer) }}</view>
          </view>
          <view class="content">
            <view class="tit">楼层电梯</view>
            <view class="text">{{ floorType || '暂无数据' }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 代收货款 -->
    <view class="card" v-if="orderList.collectionMoney && orderList.collectionMoney !== '0'">
      <view class="box">
        <view class="title">代收货款</view>
        <view class="flex">
          <view class="content">
            <view class="tit">货款金额</view>
            <view class="text">￥{{ orderList.collectionMoney }}元</view>
          </view>
          <view class="content">
            <view class="tit">返还周期</view>
            <view class="text" v-if="orderList.returnCycle == '1'">即日退</view>
            <view class="text" v-if="orderList.returnCycle == '2'">三日退</view>
            <view class="text" v-if="orderList.returnCycle == '3'">月结</view>
          </view>
        </view>
        <view class="flex" v-if="orderList.returnType">
          <view class="content">
            <view class="tit">返还方式</view>
            <view class="text" v-if="orderList.returnType == '1'">会员卡返还</view>
            <view class="text" v-if="orderList.returnType == '2'">银行卡返还</view>
            <view class="text" v-if="orderList.returnType == '3'">微信返还</view>
            <view class="text" v-if="orderList.returnType == '4'">支付宝返还</view>
            <view class="text" v-if="orderList.returnType == '5'">现金返还</view>
          </view>
        </view>
        <view class="flex" v-if="orderList.returnType">
          <view class="content">
            <view class="tit">银行卡号</view>
            <view class="text">{{ orderList.returunAccount || '暂无数据' }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 更多服务 -->
    <view class="card">
      <view class="box">
        <view class="title">更多服务</view>
        <view class="flex">
          <view class="content">
            <view class="tit">单据服务</view>
            <view class="text">{{ orderList.billServer || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex">
          <view class="content">
            <view class="tit">包装服务</view>
            <view class="text">{{ orderList.packing ? '是' : '否' }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 签单信息 -->
    <view class="card">
      <view class="box">
        <view class="title">签单信息</view>
        <view class="flex">
          <view class="content">
            <view class="tit">签单单位</view>
            <view class="text">{{ orderList.billCompany || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex">
          <view class="content">
            <view class="tit">结算地 </view>
            <view class="text">{{ orderList.clearAdd || '暂无数据' }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="fixed_bottom" v-if="orderList.clearingForm == '1' && !orderList.allPaid && orderList.billNo">
    <view class="flex_start"
      ><span>合计</span> <span class="pay">￥{{ allPay.toFixed(2) }}</span
      ><a @click="showCost = true"><span style="color: #0966ff">明细^</span> <RectDown /> </a
    ></view>
    <nut-button type="info" class="btn_blue" @click="toPay">审核通过</nut-button>
  </view>

  <view class="fixed_bottom" v-else>
    <nut-button type="info" class="btn_confirm btn_blue" @click="toReview">审核通过</nut-button>
  </view>
  <CostInfoModal :showCost="showCost" @closeCostModal="closeCostModal" />
</template>

<script lang="ts" setup>
import useOrderStore from '@/store/order'
import { GoodsListType } from '@/type/index.ts'
import CostInfoModal from '@/pages2/reviewPage/costInfoModal.vue' // 底部价格合计组件
import { onMounted, ref } from 'vue'
import { getupdateRemarks } from '@/@api/review'
import Taro, { useReady } from '@tarojs/taro'

/* 初始化数据变量 start */
useReady(() => {
  Taro.setNavigationBarTitle({
    title: '审核运单'
  })
  Taro.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#ffffff'
  })
})

onMounted(() => {
  initList() // 审核运单页详情初始化
  getAllMoney() // 计算费用
  console.log(JSON.parse(JSON.stringify(orderList.value)), 'orderList')
})

const orderStore = useOrderStore()
const orderList = ref<any>()
orderList.value = orderStore.orderInfo
const floorType = ref('') // 楼层电梯
const allPay = ref(0) // 合计费用
const showCost = ref(false) // 底部价格以及明细按钮是否显示

// 合计金额
function getAllMoney() {
  console.log(JSON.parse(JSON.stringify(orderList.value)))
  orderList.value.costList.forEach((item) => {
    // allPay.value = allPay.value + item.actualMoney
    allPay.value = allPay.value + (item.actualMoney - item.paidMoney)
  })
}

// 关闭费用窗口
function closeCostModal() {
  showCost.value = false
}

/* 跳转收银台携带上保管费 start */
function toPay() {
  Taro.navigateTo({
    url: `/pages2/pay/index?fromPage=review`
  })
}
/* 跳转收银台 end */

// 调用审核接口审核订单
async function toReview() {
  const reviewParams = [
    {
      billNo: orderList.value.billNo,
      ssoId: orderList.value.ssoId,
      isExamine: 2,
      pickUpMode: orderList.value.pickUpMode
    }
  ]
  const { data } = await getupdateRemarks(reviewParams)

  if (data.code == 200) {
    console.log('审核成功')
    // 跳转审核详情页
    Taro.navigateTo({
      url: '/pages2/pay/info?billFlag=review'
    })
  } else {
    Taro.showToast({
      title: data.msg,
      icon: 'error',
      duration: 2000
    })
  }
}

// 身份证号隐藏
if (orderList.value.shipperId) {
  let str1 = orderList.value.shipperId.slice(0, 6)
  let str2 = orderList.value.shipperId.slice(14)
  orderList.value.shipperId = str1 + '********' + str2
}

/* 初始化该页面部分信息 有的直接取出来 有的要处理数据 */
function initList() {
  console.log(JSON.parse(JSON.stringify(orderList)), 'orderList')
  // 初始化楼层
  pickElevatorNum(orderList.value.dischargeElevator)
}

/* 过滤承运类型 */
function pickSendType(val: string) {
  if (val == '1') {
    return '快件'
  } else if (val == '2') {
    return '普件'
  } else if (val == '3') {
    return '整车'
  } else if (val == '4') {
    return '560经济型'
  } else if (val == '5') {
    return '560商务型'
  } else if (val == '6') {
    return '次日达'
  } else if (val == '7') {
    return '隔日达'
  }
}

/* 过滤付款方式 */
function pickClearingForm(val: string) {
  if (val == '1') {
    return '签单'
  } else if (val == '2') {
    return '现付'
  } else if (val == '3') {
    return '提付'
  }
}

/* 过滤货物信息-名称件数 */
function filterGoodsName(val: GoodsListType) {
  if (val) {
    return val.goodsName + val.goodsNumber + '件'
  }
}

/* 过滤货物信息-重量体积包装 */
function filterGoodsInfo(val: GoodsListType) {
  const goodsVolume: number = parseFloat(Number(val.goodsVolume).toFixed(2))
  return val.weigh + 'kg,' + goodsVolume + 'm³,' + val.packing
}

/* 过滤提货方式 */
function pickUpType(val: string) {
  if (val == '1') {
    return '自提'
  } else if (val == '2') {
    return '送货'
  } else {
    return '直送'
  }
}

/* 过滤直送服务 */
function pickDeliveryType(val: string) {
  if (val == '1') {
    return '送商超'
  } else if (val == '2') {
    return '进仓'
  } else {
    return '报关'
  }
}
/* 过滤卸货类型 */
function pickDischargeServer(val: string) {
  if (val == '1') {
    return '标准件'
  } else if (val == '2') {
    return '非标准'
  } else {
    return '特殊件'
  }
}

/* 楼层电梯初始化 */
function pickElevatorNum(val: string) {
  if (val) {
    floorType.value = '电梯'
  } else {
    floorType.value = `楼梯：${orderList.value.elevatorNum ? orderList.value.elevatorNum : '1'}楼`
  }
}

// 关闭网点窗口
// function closeGoodsModal() {
//     istihuoshow.value = false
// }

// 跳转到地址薄
// function gotoAddressBook(msg: string) {
//     Taro.navigateTo({
//         url: `../AddressBook/index?msg=${msg}`
//     });
// }
</script>

<style lang="scss">
.conCard {
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);

    padding: 20rpx;
    box-sizing: border-box;
    height: 130rpx;
    .box {
      width: 550rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      .title {
        font-weight: bold;
        color: #252525;
      }
    }
  }

  .flex-ld {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
  }
}
.container_send {
  padding: 16rpx 24rpx;
  background-color: #ebecf0;
  height: calc(100vh - 128rpx);
  overflow: auto;
  box-sizing: border-box;

  .billNo {
    background-color: #fff;

    .nut-input {
      color: #999999;
    }
  }

  .center {
    margin-top: 16rpx;
    width: 700rpx;
    box-sizing: border-box;
    padding: 27rpx;
    background-color: #fff;
    border-radius: 10rpx;

    .top {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-top: 40rpx;

      image {
        width: 60rpx;
        height: 60rpx;
        margin-top: -10rpx;
      }

      .centers {
        width: 572rpx;
        border-bottom: 1px solid #ccc;
        padding-bottom: 32rpx;
        display: flex;
        justify-content: space-between;

        .right {
          font-size: 23rpx;
          align-self: center;
          color: #bcbec5;
        }
      }

      .text {
        // height: 32rpx;
        font-size: 20rpx !important;
      }

      p {
        display: flex;
        font-size: 48rpx;
        color: #666666;

        span {
          margin-right: 20rpx;
          font-size: 28rpx;
          font-weight: 700;
          line-height: 40rpx;
          color: #252525;
        }

        font-size: 24rpx;
      }
    }

    .bottoms {
      display: flex;
      width: 572rpx;
      margin-top: 32rpx;
      font-size: 28rpx;

      span {
        margin-right: 24rpx;
      }
    }
  }
}

.container_send_bottom {
  width: 100vw;
  height: 128rpx;
  display: flex;
  align-items: flex-end;
  font-size: 24rpx;
  padding: 20rpx 24rpx;
  color: #999999;
  box-sizing: border-box;

  strong {
    width: 150rpx;
  }

  span {
    font-size: 60rpx;
    color: #fa5151;
  }

  a {
    display: flex;
    width: 120rpx;
    color: #0966ff;
    font-size: 24rpx;
    margin-left: 32rpx;
  }

  .nut-button {
    margin-left: 30rpx;
  }
}

.headPortrait {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.btn {
  width: 100%;
  margin-left: 0 !important;
  margin: 0 auto !important;
}

/* copy start*/

.container_send_bottom {
  width: 100vw;
  height: 128rpx;
  display: flex;
  align-items: flex-end;
  font-size: 24rpx;
  padding: 20rpx 24rpx;
  color: #999999;
  box-sizing: border-box;

  strong {
    width: 100rpx;
  }

  span {
    font-size: 60rpx;
    color: #fa5151;
  }

  a {
    display: flex;
    width: 120rpx;
    color: #0966ff;
    font-size: 24rpx;
    margin-left: 32rpx;
  }

  .nut-button {
    margin-left: 30rpx;
  }
}

/* copy end */

.flex_start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fixed_bottom {
  width: 100vw;
  height: 128rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 128rpx;
  box-sizing: border-box;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  color: #666;
  font-size: 24rpx;
  padding: 20rpx 24rpx;
  z-index: 99999;

  .pay {
    font-size: 40rpx;
    color: #0966ff;
    margin: 0 26rpx;
  }

  .btn_confirm {
    width: 100%;
  }
  .btn_blue {
    background: #0966ff;
  }
}

.card {
  box-sizing: border-box;
  padding: 12rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin: 8rpx auto;

  .flex {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .content {
      flex: 1;
      display: flex;
      align-items: center;
      /* 垂直居中对齐 */
      margin: 12rpx auto;
    }
  }

  .gray_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
  }

  .gray_bg {
    background: #f5f5f5;
    border-radius: 10rpx;
    margin-top: 10rpx;
    padding: 0 24rpx;
    box-sizing: border-box;

    .gray_flex {
      display: flex;
      justify-content: space-between;
      padding: 24rpx 0;
      box-sizing: border-box;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
    }
    .gray_flex:last-child {
      border-bottom: none;
    }
  }

  .box {
    padding: 12rpx;
    border-radius: 8rpx;

    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #252525;
      padding-bottom: 12rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
    }

    .tit {
      font-size: 26rpx;

      color: #999999;
      margin-right: 24rpx;
    }

    .text {
      font-size: 26rpx;

      color: #252525;
    }
  }
}
</style>
